<template>
	<view :style="viewColor" class="body">
		<view class="head-wrapper" :style="'padding-top:'+statusBarHeight+';height:126rpx'">
			<view class="head-menu">
				<view class='iconfont icon-xiangzuo' @click="returns"></view>
				<view class="iconfont icon-shouye4" @click="goHome"></view>
			</view>
			<view class="head-title">
				<view>{{navigationBarTitle}}</view>
				<view class="send_community" @click="goUrl('/pages/plantGrass/plant_release/index?type=1')">+发布</view>
			</view>
		</view>
		<view style="padding: 0 30rpx;">
			<view class="popular_circle_tag" v-if="is_label == 1">
				<!-- <swiper class="popular_circle_tag_list" acceleration skip-hidden-item-layout display-multiple-items="4" style="height: 70rpx;" @change="tap2">
					<swiper-item class="popular_circle_tag_item" v-for="(item,index) in labelList" :key='index' :class="navActive == index ? 'popular_circle_tag_item_on' : ''" :id="'id'+index" @click="tap(index)" style="line-height: 40rpx;">
						{{item.label_name}}
					</swiper-item>
				</swiper> -->
				<scroll-view class="nav-label-list" scroll-x="true" scroll-with-animation="true"  show-scrollbar="true" scroll-left="0" :scroll-into-view="'id'+navActive">
					<view class="nav-label-tab" v-for="(item,index) in labelList" :data-index="index" :class="navActive == index ? 'nav-label-active' : ''" @click="tap(index)" :key="index" :id="'id'+index">
						{{item.label_name}}
					</view>
				</scroll-view>
				<view class="more_label" @click="is_label_list_popup = !is_label_list_popup"><image :src=" domain + '/uploads/def/20230630/bba7cebb1358e33d19bdece4204cb7ef.png'" /></view>
			</view>
			<block v-if="list.length">
				<service :list="list" :type="2" @hasBlockLine="hasBlockLine" @hasNoneLine="hasNoneLine" @setCommunityShare="setCommunityShare"></service>
			</block>
			<emptyPage v-else title="暂无数据"></emptyPage>
		</view>
		<labelListPopup :is_label_list_popup="is_label_list_popup" :labelList="labelList" :tabId="navActive" @onChangeTag="onChangeTag"></labelListPopup>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import { getLabelList } from '@/api/api.js';
	import {
		recommendCommunity
	} from '@/api/circle.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import labelListPopup from '@/components/labelListPopup';
	import service from '@/components/service';
	import emptyPage from '@/components/emptyPage.vue';
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { getUserInfo } from '@/api/user.js';
	export default {
		components: {
			authorize,
			labelListPopup,
			service,
			emptyPage
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				statusBarHeight: statusBarHeight, //系统导航条高度
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				labelList: [],
				navActive: 0,
				page: 1,
				isLoading: true,
				list: [],
				is_label_list_popup: false,
				share: {
					title: '服务广场',
					imageUrl: '',
					url: '/pages/extends/community/community_service'
				},
				is_label: 1,
				navigationBarTitle: '服务广场'
			};
		},
		computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
		onLoad(options) {
			this.is_label = options.is_label || 1;
			this.navActive = options.navActive > 0 ? options.navActive : 0;
			this.getLabel();
			if(parseInt(this.is_label) == 2) {
				this.navigationBarTitle = '热门头条'
			}
		},
		mounted: function() {
		},
		methods: {
			/**
			 * 获取行业列表
			 */
			getLabel() {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					is_sort = true;
				getLabelList({customerIndustry, engagedIndustry, is_sort, is_home: 1}).then(res=>{
					that.labelList = res.data.list;
					that.getRecommendDemand()
				}).catch(err=>{
					console.log('err', err);
				})
			},
			tap(index) {
				this.navActive = index;
				this.isLoading = true;
				this.page = 1;
				this.getRecommendDemand();
			},
			tap2(data) {
				this.tap(data.detail.current)
			},
			onChangeTag(data) {
				this.is_label_list_popup = false;
				this.navActive = data.index;
				this.isLoading = true;
				this.page = 1;
				this.getRecommendDemand();
			},
			// 推荐行业需求
			getRecommendDemand() {
				let that = this;
				if(!that.isLoading) return false;
				let is_promotion = that.labelList[that.navActive].label_id == -1 ? 1 : 0;
				let is_industry_top = that.labelList[that.navActive].label_id == -1 ? 0 : 1;
				let data = {
					is_type: 1,
					label_id: that.labelList[that.navActive].label_id, 
					page: that.page, 
					limit: 10,
					is_promotion: is_promotion,
					is_industry_top: is_industry_top,
				}
				recommendCommunity(data).then(res=>{
					if (that.page == 1) {
						that.list = res.data.list;
					} else {
						that.list = that.list.concat(res.data.list);
					}
					that.page++;
					that.isLoading = res.data.list.length >= 10;
				}).catch(err=>{
					console.log('getRecommendCustomerr', err);
				})
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			hasBlockLine(index){
				this.$set(this.list[index], 'is_line', false);
			},
			hasNoneLine(index){
				this.$set(this.list[index], 'is_line', true);
			},
			// 后退
			returns: function() {
				uni.navigateBack()
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goUrl(url) {
				this.$util.Tips(url)
			},
			setCommunityShare(data) {
				console.log(666, data)
				this.share.title = data.content;
				this.share.imageUrl = data.image[0],
				this.share.url = '/pages/plantGrass/plant_user/index?id='+data.uid+'&searchType=1&community_id='+data.community_id
			}
		},
		onReachBottom() {
			console.log(9)
			this.getRecommendDemand();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: that.share.title,
				imageUrl: that.share.imageUrl,
				path: that.share.url
			}
		}
	}
</script>

<style scoped lang="scss">
.body {
	background-color: #fff;
}
.head-wrapper {
	z-index: 999;
	display: flex;
	align-items: center;
	padding: 0rpx 30rpx;
	background-color: #FFE103;
	position: sticky;
	top: 0;
}
.head-menu {
	display: flex;
	align-items: center;
	height: 54rpx;
	width: 140rpx;
	background: rgba(0, 0, 0, .25);
	border-radius: 27rpx;
	.iconfont {
		flex: 1;
		text-align: center;
		color: #fff;
		box-sizing: border-box;
		&.icon-xiangzuo {
			border-right: 1px solid #fff;
		}
	}
}
.head-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #000;
	line-height: 36rpx;
	margin-left: 20rpx;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 350rpx;
	.send_community {
		background-color: #fff;
		padding: 10rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
}
.popular_circle_tag {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	padding: 30rpx 0;
	overflow: hidden;
	.nav-label-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;
		width: 630rpx;
		.nav-label-tab {
			display: inline-block;
			white-space: nowrap;
			// height: 50rpx;
			// line-height: 50rpx;
			text-align: center;
			max-width: 160rpx;
			margin-right: 30rpx;
			position: relative;
			font-size: 36rpx;
			font-weight: 500;
			color: #000;
			padding-bottom: 20rpx;
		}
		.nav-label-active {
			font-size: 38rpx;
			color: #FE4504;
			&::after{
				/* content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: 0rpx; */
				content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: 0rpx;
			}
		}
	}
	.popular_circle_tag_list {
		flex: 1;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		grid-gap: 30rpx;
		overflow: hidden;
		.popular_circle_tag_item {
			font-size: 32rpx;
			font-weight: 500;
			color: #323232;
			line-height: 40rpx;
			margin-right: 40rpx;
			display: inline-block;
			position: relative;
			text-align: center;
		}
		.popular_circle_tag_item_on {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 52rpx;
			height: 70rpx;
			&::after{
				content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: 0rpx;
			}
		}
	}
	
	.more_label {
		width: 60rpx;
		display: flex;
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
}
</style>
